<template>
  <div class="centerpage">
    <el-col
      v-for="item in order_list"
      :key="item.id"
      width="100%"
      style="margin-bottom: 10px;"
    >
      <el-card shadow="hover" :body-style="{ padding: '0px' }">
        <div style="padding: 14px;">
          <span>{{ item.flight_id.flight_name.name }}———</span>
          <span>{{ item.from_place }}</span
          >--
          <span>{{ item.to_place }}</span>--
          <span>座位号：{{ item.seat_number }}</span>
          <span class="price">
            <span v-if="item.class_type == 0">头等舱：</span>
            <span v-else>经济舱：</span>
            ￥{{item.price}}</span
          >
          <div class="bottom clearfix">
            <time class="time">{{ formatTime(item.ticket_date) }}</time>
            <span style="float:right; color: #999" v-if="item.pay_status == 0"
              >未支付</span
            >
            <span
              style="float:right; color: #54ff00;"
              v-if="item.pay_status == 1"
              >已支付</span
            >
            <span
              style="float:right; color: #ff0000;"
              v-if="item.pay_status == 2"
              >已取消</span
            >
          </div>
          <div style="float: right; margin-bottom: 10px;">
            <el-button
              v-if="item.pay_status == 0"
              size="mini"
              type="success"
              @click="modiyf_order(item, 1)"
              >去支付</el-button
            >
            <el-button
              v-if="item.pay_status == 0"
              size="mini"
              type="warning"
              @click="modiyf_order(item, 2)"
              >取消</el-button
            >
            <!-- <el-button size="mini" type="primary" @click="order_detail(item)"
              >查看</el-button
            > -->
          </div>
        </div>
      </el-card>
    </el-col>
    <!-- <order
      :order_status="order_status_data"
      :order_detail="order_detail_data"
    /> -->
  </div>
</template>

<script>
import request from "../request/http";
import order from "./common/order";
import { mapState } from "vuex";
export default {
  name: "Myorder",
  data() {
    return {
      order_list: [],
      order_status_data: false,
      order_detail_data: [],
    };
  },
  components: {
    order,
  },
  computed: {
    ...mapState({
      userid: (state) => state.user_id,
    }),
  },
  created() {
    this.get_user_order();
  },
  methods: {
    cancellation_order(item, status) {
      this.$confirm("是否取消该订单?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.order_status(item, status);
        })
        .catch(() => {});
    },
    pay_order(item, status) {
      this.$confirm("是否支付该订单?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.order_status(item, status);
        })
        .catch(() => {});
    },
    modiyf_order(item, status) {
      if (status == 2) {
        this.cancellation_order(item, status);
      }
      if (status == 1) {
        this.pay_order(item, status);
      }
      this.get_user_order();
    },
    order_status(item, status) {
      request({
        url: "/booked/modify-order-status/",
        params: {
          id: item.id,
          status: status,
          payment_amount: status == 1 ? item.price : 0,
        },
      })
        .then((res) => {
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: "取消成功!",
            });
            this.get_user_order();
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    get_user_order() {
      request({
        url: "/booked/get-user-order/",
        params: {
          user_id: this.userid,
        },
      })
        .then((res) => {
          this.order_list = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    order_detail(item) {
      this.order_status_data = true;
      this.order_detail_data = item;
    },
    // 格式化时间
    formatTime(date) {
      var json_date = new Date(date);
      var ysar = json_date.getFullYear();
      var month = json_date.getMonth() + 1;
      var day = json_date.getDate();
      var hours = json_date.getHours();
      var minutes = json_date.getMinutes();
      if (month < 10) {
        month = "0" + String(month);
      }
      if (day < 10) {
        day = "0" + String(day);
      }
      if (hours < 10) {
        hours = "0" + String(hours);
      }
      if (minutes < 10) {
        minutes = "0" + String(minutes);
      }
      var datetime =
        ysar + "-" + month + "-" + day + " " + hours + ":" + minutes;
      return datetime;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin: 13px 0;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>
